<template>
  <!-- 收付费作业-AutoPay In账户维护页面 -->
  <div class="fillcontain">
    <el-form :model="searchParams" :rules="rules" ref="ruleForm" label-width="120px" class="search_container">
      <el-row>
        <el-col :span="6">
          <el-form-item label="受理号" prop="applNum">
            <el-input v-model="searchParams.applNum" placeholder="请输入" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="收款凭证号码" prop="receiptNum">
            <el-input v-model="searchParams.receiptNum" placeholder="请输入" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="保单号码" prop="chdrNum">
            <el-input v-model="searchParams.chdrNum" placeholder="请输入" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6" class="text_center">
          <el-button type="primary" icon="el-icon-search" @click="subGetList"></el-button>
          <el-button type="primary" plain icon="el-icon-refresh" @click="resetSearch"></el-button>
        </el-col>
      </el-row>
    </el-form>
    <div class="contain">
      <!-- <el-row class="bgfff pb15">
          <el-col :span="24">
              <el-button type="danger" plain>新增</el-button>
          </el-col>
      </el-row> -->
      <div class="table_container">
        <el-table v-loading="loading" :data="tableData" highlight-current-row
                  header-cell-class-name="table-header-class" style="width:100%">
          <el-table-column
              min-width="120"
              property="surName"
              label="姓名"
              align='center'
              show-overflow-tooltip>
          </el-table-column>
          <el-table-column
              min-width="120"
              property="customNum"
              label="客户号"
              align='center'
              show-overflow-tooltip>
          </el-table-column>
          <el-table-column
              min-width="120"
              property="receiptNum"
              label="付款证件号"
              align='center'
              show-overflow-tooltip>
          </el-table-column>
          <el-table-column
              min-width="120"
              property="bankaccNum"
              label="账号卡号"
              align='center'
              show-overflow-tooltip>
          </el-table-column>
          <el-table-column
              min-width="120"
              property="accountCity"
              label="账户所属城市"
              align='center'
              show-overflow-tooltip :formatter="formatAccCity">
          </el-table-column>


          <el-table-column min-width="120" property="bankdesc" label="银行名称" align='center' show-overflow-tooltip
                           :formatter="formatAccBank">
          </el-table-column>

          <el-table-column
              min-width="120"
              property="transferType"
              label="转账类型"
              align='center'
              show-overflow-tooltip>
          </el-table-column>
          <el-table-column
              min-width="120"
              property="startTime"
              label="起始日期"
              align='center'
              show-overflow-tooltip>
          </el-table-column>
          <el-table-column
              min-width="120"
              property="enderTime"
              label="截止日期"
              align='center'
              show-overflow-tooltip>
          </el-table-column>
          <el-table-column
              min-width="100"
              fixed="right"
              label="操作"
              align='center'>
            <template slot-scope="scope">
              <!-- <el-button type="text" size="small" @click="accountUpdateGo(scope.row)">修改</el-button> -->
              <span class="operationIcon" @click="accountUpdateGo(scope.row)">
                <el-tooltip class="item" effect="light" content="修改" placement="top">
                  <i class="el-icon-edit"></i>
                </el-tooltip>
              </span>
            </template>
          </el-table-column>
        </el-table>
        <el-row>
          <el-col :span="24">
            <div class="pagination">
              <el-pagination
                  background
                  v-if='paginations.total > 0'
                  :page-sizes="paginations.pageSizes"
                  :page-size="paginations.pageSize"
                  :layout="paginations.layout"
                  :total="paginations.total"
                  :current-page='paginations.pageIndex'
                  @current-change='handleCurrentChange'
                  @size-change='handleSizeChange'>
              </el-pagination>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- 弹框 -->
    <el-dialog
        title="修改"
        :visible.sync="accountDialog"
        width="60%"
        center @close="colseAutoPayInDialog">
      <el-form ref="form" :model="form" label-width="120px">
        <el-row>
          <el-col :span="12" class="common-box">
            <el-col :span="6" class="common-lab">
              <label class="labelName">付款证件号码</label>
            </el-col>
            <el-col :span="16">
              <el-select v-model="form.receiptNum" placeholder="" @change="receiptNumChange($event)">
                <el-option
                    :key="form.dto1ReceiptNum"
                    :label="form.dto1ReceiptNum"
                    :value="form.dto1ReceiptNum">
                </el-option>
                <el-option
                    :key="form.dto2ReceiptNum"
                    :label="form.dto2ReceiptNum"
                    :value="form.dto2ReceiptNum">
                </el-option>
              </el-select>
            </el-col>
          </el-col>
          <el-col :span="12" class="common-box">
            <el-col :span="6" class="common-lab">
              <label class="labelName">姓名</label>
            </el-col>
            <el-col :span="16">
              <el-input disabled v-model="form.surName" placeholder=""></el-input>
            </el-col>
          </el-col>
          <el-col :span="12" class="common-box">
            <el-col :span="6" class="common-lab">
              <label class="labelName">客户号</label>
            </el-col>
            <el-col :span="16">
              <el-input disabled v-model="form.customNum" placeholder=""></el-input>
            </el-col>
          </el-col>
          <el-col :span="12" class="common-box">
            <el-col :span="6" class="common-lab">
              <label class="labelName">账户所属城市</label>
            </el-col>
            <el-col :span="16">
              <el-select v-model="form.accountCity" placeholder="" filterable>
                <el-option
                    v-for="item in optionsCity"
                    :key="item.value"
                    :label="item.label + ' - ' + item.value"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-col>
          </el-col>
          <el-col :span="12" class="common-box">
            <el-col :span="6" class="common-lab">
              <label class="labelName">银行名称</label>
            </el-col>
            <el-col :span="16">
              <el-select v-model="form.bankCode" placeholder="" @change="changeBankCode(form)" filterable>
                <el-option
                    v-for="item in optionsBank"
                    :key="item.value"
                    :label="item.value + ' - ' + item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-col>
          </el-col>
          <el-col :span="12" class="common-box">
            <el-col :span="6" class="common-lab">
              <label class="labelName">账户卡号</label>
            </el-col>
            <el-col :span="16">
              <el-input v-model="form.bankaccNum" placeholder="" @blur="checkBankAccount(form)" ref="forcusBankaccNum"
                        clearable></el-input>
            </el-col>
          </el-col>
          <el-col :span="12" class="common-box">
            <el-col :span="6" class="common-lab">
              <label class="labelName">转账类型</label>
            </el-col>
            <!-- <el-col :span="6">
               <el-select v-model="form.transferType" placeholder="" disabled="true">
                   <el-option
                       v-for="item in isTransferOptions"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
                   </el-option>
               </el-select>
            </el-col> -->
            <el-col :span="6" class="pl5">
              <el-input v-model="form.transferType" placeholder="" disabled></el-input>
            </el-col>
            <el-col :span="10" class="pl5">
              <el-input v-model="form.accountName" placeholder="" disabled></el-input>
            </el-col>
          </el-col>
          <el-col :span="12" class="common-box">
            <el-col :span="6" class="common-lab">
              <label class="labelName">确认账号卡号</label>
            </el-col>
            <el-col :span="16">
              <el-input v-model="form.asbankaccNum" placeholder="" @blur="checkAsBankAccount(form)"
                        ref="forcusAsBankaccNum" clearable></el-input>
            </el-col>
          </el-col>
          <el-col :span="12" class="common-box">
            <el-col :span="6" class="common-lab">
              <label class="labelName">有效期</label>
            </el-col>
            <el-col :span="16">
              <el-date-picker
                  v-model="startTimeAndenderTime"
                  type="daterange"
                  range-separator="至"
                  disabled
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
              </el-date-picker>
            </el-col>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="colseAutoPayInDialog">返 回</el-button>
        <el-button @click="updateAutoPayInInfo(form)" class="Defaultbutton">保 存</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
  import {mapState, mapGetters} from 'vuex';
  import {
    getAutoPayinQueryList,
    updateAutoPayInInfo,
    selectOptionCityCodeVo,
    selectOptionBankCodeVo,
    checkBankCode,
    checkBankAccount
  } from '@/api/selloutLock/autoPayInAcc';
  import constant from '@/utils/constant';
  import {log} from 'util';

  export default {
    data() {
      this.dateFormat = 'YYYY/MM/DD HH:mm:ss';
      return {
        startTimeAndenderTime: [],
        valueDate: '',
        accountDialog: false,//默认隐藏弹框
        // 查询条件
        rules: {
          applNum: [],
          receiptNum: [],
          chdrNum: [],
        },
        searchParams: {
          applNum: '', //受理号
          receiptNum: '', //付款凭证号码
          chdrNum: '', //保单号码
        },
        tableData: [],
        loading: false,
        //需要给分页组件传的信息
        paginations: {
          total: 0,        // 总数
          pageIndex: 1,  // 当前位于哪页
          pageSize: 10,   // 1页显示多少条
          pageSizes: [5, 10, 15, 20],  //每页显示多少条
          layout: "total, sizes, prev, pager, next, jumper"   // 翻页属性
        },
        form: {
          receiptNum: '',
          dto1ReceiptNum: '',
          dto2ReceiptNum: '',
          surName: '',
          customNum: '',
          accountCity: '',
          bankCode: '',
          bankaccNum: '',
          transferType: '',
          accountName: '',
          asbankaccNum: '',
          applNum: '',
          chdrNum: '',
          startTime: '',
          enderTime: '',
        },//CYQ:20200206-收付费-AutoPayIn维护
        isTransferOptions: [{label: '手工', value: 'M'}, {label: '系统', value: 'S'}],//转账标志
        optionsCity: [],//城市代码
        optionsBank: [],//银行名称
        timeDisable: false
      }
    },
    created() {
//          this.getList();

    },
    mounted() {
      // this.getList();
      //CYQ：20200211-收付费作业-AutoPayIn账户维护-城市代码列表(为下拉框)
      this.selectOptionCityCodeVo();
      //CYQ：20200211-收付费作业-AutoPayIn账户维护-城市代码列表(为下拉框)
      this.selectOptionBankCodeVo();
    },
    methods: {
      // 证件号码下拉值改变事件
      receiptNumChange(_event) {
        if (_event) {
          if (this.form.dto1ReceiptNum == _event) {
            this.form.customNum = this.form.dto1ClntNum;
            this.form.surName = this.form.dto1SurName;
          } else {
            this.form.customNum = this.form.dto2ClntNum;
            this.form.surName = this.form.dto2SurName;
          }
        }
      },

      //CYQ:20200304-收付费作业-强制转账-叉掉窗口
      closeDialog() {
        console.log("CYQ:我叉掉了窗口,所以也要刷新页面数据");
        // this.getList2();
      },

      //CYQ:关闭弹窗
      colseAutoPayInDialog() {
        this.accountDialog = false;
        // this.getList2();
      },
      //CYQ:银行代码执行校验
      changeBankCode(row) {
        this.form.transferType = '';
        this.form.accountName = '';
        console.log("CYQ:20200212-收付费作业-AutoPayIn账户-根据银行代码获取转账类型和银行码描述:" + row.bankdesc + "-" + row.bankCode);
        let params = {
          "bankCode": row.bankCode,
        }
        this.$store.dispatch('loading/CHANGE_LOADING', true);
        checkBankCode(params).then(res => {
          this.$store.dispatch('loading/CHANGE_LOADING', false);
          if (res.resultCode == 0) {
            this.form.transferType = res.data.transferType;
            this.form.accountName = res.data.accountName;
            this.form.bankdesc = res.data.bankdesc;
            for (const i in this.optionsBank) {
              const op = this.optionsBank[i];
              if (row.bankdesc == op.remarks || row.bankdesc == op.label) {
                row.bankCode = op.value;
                return op.label;
              }
            }
            //this.form.bankCode = row.bankCode;
            // this.$message({
            //     message: res.resultMsg,
            //     type: 'success'
            // });

            // console.log(this.form);
          } else {
            this.form.transferType = '';
            this.form.accountName = '';
            return false;
          }
        }).catch(err => {
          this.$store.dispatch('loading/CHANGE_LOADING', false);
        })
      },
      //CYQ:银行名称赋值
      formatAccBank(row) {
        console.log("CYQ:20200213-自动匹配合理的字段名称，其实际字段名为:" + row.bankdesc);
        for (const i in this.optionsBank) {
          const op = this.optionsBank[i];
          if (row.bankdesc == op.remarks || row.bankdesc == op.label) {
            row.bankCode = op.value;
            return op.label;
          }
        }
      },
      //CYQ:城市名称赋值
      formatAccCity(row) {
        for (const i in this.optionsCity) {
          const op = this.optionsCity[i];
          if (op.value == row.accountCity) {
            return op.label;
          }
        }
      },
      //CYQ: 20200211-收付费作业-AutoPayIn账户维护-城市代码列表(为下拉框)
      selectOptionCityCodeVo() {
        console.log("CYQ:20200211-收付费作业-AutoPayIn账户维护-查询城市列表");
        let params = {};
        selectOptionCityCodeVo(params).then(res => {
          this.$store.dispatch('loading/CHANGE_LOADING', false)
          if (res.resultCode == constant.SUCCESS) {
            this.optionsCity = res.data;
            console.log(res.data);
          } else {
            return false;
          }
        }).catch(err => {
          this.$store.dispatch('loading/CHANGE_LOADING', false);
        })
      },
      //CYQ：20200211-收付费作业-AutoPayIn账户维护-银行代码列表(为下拉框)
      selectOptionBankCodeVo() {
        console.log("CYQ:20200211-收付费作业-AutoPayIn账户维护-查询银行列表");
        let params = {};
        selectOptionBankCodeVo(params).then(res => {
          this.$store.dispatch('loading/CHANGE_LOADING', false)
          if (res.resultCode == constant.SUCCESS) {
            this.optionsBank = res.data;
            console.log(res.data);
          } else {
            return false;
          }
        }).catch(err => {
          this.$store.dispatch('loading/CHANGE_LOADING', false);
        })

      },
      //CYQ:20200211-收付费作业-AutoPayIn账户维护-验证银行卡号
      checkBankAccount(row) {
        if (row.bankaccNum == null || row.bankaccNum == '') {
          this.$message({
            message: '账户卡号不能为空!',
            type: 'error'
          });
          return false;
        }

        let params = {
          "bankaccNum": row.bankaccNum,
          "asbankaccNum": row.asbankaccNum,
        }
        this.$store.dispatch('loading/CHANGE_LOADING', true)
        checkBankAccount(params).then(res => {
          this.$store.dispatch('loading/CHANGE_LOADING', false)
          if (res.resultCode == constant.SUCCESS && res.data == true) {
            this.$message({
              message: res.resultMsg,
              type: 'success'
            });
          } else {
            this.$refs.forcusBankaccNum.focus();
            return false;
          }
        }).catch(err => {
          this.$store.dispatch('loading/CHANGE_LOADING', false);
        })
      },
      //CYQ:20200211-收付费作业-AutoPayIn账户维护-验证确认卡号
      checkAsBankAccount(row) {
        if ((row.bankaccNum == null || row.bankaccNum == '') && (row.asbankaccNum == null || row.asbankaccNum == '')) {
          this.$message({
            message: '账户卡号和确认账号卡号不能为空!',
            type: 'error'
          });
          this.$refs.forcusBankaccNum.focus();
          return false;
        }

        if ((row.bankaccNum != null || row.bankaccNum != '') && (row.bankaccNum != row.asbankaccNum)) {
          this.$message({
            message: '账户卡号和确认账号卡号必须保持一致!',
            type: 'error'
          });
          //this.$refs.forcusAsBankaccNum.focus();
          return false;
        }
      },
      //CYQ:20200211-收付费作业-AutoPayIn账户维护-修改中账户
      accountUpdateGo(row) {
        this.accountDialog = true;
        for (const key in row) {
          this.$set(this.form, key, row[key]);
        }
        let enderTime = '9999-12-31';
        if (this.form.enderTime != '99999999') {
          enderTime = this.form.enderTime;
        }
        this.startTimeAndenderTime = [this.form.startTime, enderTime];
        if (this.form.customNum) {
          if (this.form.customNum == this.form.dto1ClntNum) {
            this.form.receiptNum = this.form.dto1ReceiptNum;
          } else {
            this.form.receiptNum = this.form.dto2ReceiptNum;
          }
        } else {
          this.form.receiptNum = this.form.dto1ReceiptNum;
        }
        this.receiptNumChange(this.form.receiptNum);
      },
      //CYQ:20200211-收付费作业-autoPayIn账户维护-保存数据
      updateAutoPayInInfo(row) {
        console.log("CYQ：20200206-收付费作业-AutoPayIn账户维护-执行修改账户信息!");
        if (row.bankaccNum == null || row.bankaccNum == '') {
          this.$message({
            message: '账户卡号不能为空!',
            type: 'error'
          });
          return false;
        }


        if (row.asbankaccNum == null || row.asbankaccNum == '') {
          this.$message({
            message: '确认账户卡号不能为空!',
            type: 'error'
          });
          return false;
        }


        if (row.bankaccNum != row.asbankaccNum) {
          this.$refs.forcusAsBankaccNum.focus();
          return false;
        }

        if (this.startTimeAndenderTime == []) {
          this.form.startTime = '0';
          this.form.enderTime = '0';
        } else {
          this.form.startTime = this.$moment(this.startTimeAndenderTime[0]).format('YYYYMMDD');
          this.form.enderTime = this.$moment(this.startTimeAndenderTime[1]).format('YYYYMMDD');
        }
        console.log('保存前的时间数据：', this.startTimeAndenderTime);
        console.log('保存前的表单数据：', this.form);


        let params = {
          "applNum": this.form.applNum,
          "chdrNum": this.form.chdrNum,
          "AutoPayIn": this.form
        }
        console.log("修改的数据:" + JSON.stringify(params));
        this.$store.dispatch('loading/CHANGE_LOADING', true);
        updateAutoPayInInfo(params).then(res => {
          this.$store.dispatch('loading/CHANGE_LOADING', false);
          if (res.resultCode == constant.SUCCESS) {
            this.accountDialog = false;
            this.$message({
              message: res.resultMsg,
              type: 'success'
            });
            this.getList2();
          }
        }).catch(err => {
          this.$store.dispatch('loading/CHANGE_LOADING', false);
        })

      },
      //CYQ:20200212-收付费作业-autoPayIn账户维护-查询列表-查询结果
      getList2() {
        this.paginations.total = 0;
        this.tableData = [];
        this.form = {};
        let params = {
          "applNum": this.searchParams.applNum,
          "receiptNum": this.searchParams.receiptNum,
          "chdrNum": this.searchParams.chdrNum,
          "pageSize": this.paginations.pageSize,
          "pageNumber": this.paginations.pageIndex,
          "orderby": '',
        }

        this.$store.dispatch('loading/CHANGE_LOADING', true);
        getAutoPayinQueryList(params).then(res => {
          this.$store.dispatch('loading/CHANGE_LOADING', false);
          console.log(res);
          if (res.resultCode == 0) {
            this.paginations.total = res.data.total;
            if (res.data) {
              console.log(' wo  进来了');
              let _item = res.data[0];
              if (_item.customNum) {
                if (_item.customNum == _item.dto1ClntNum) {
                  _item.receiptNum = _item.dto1ReceiptNum;
                } else {
                  _item.receiptNum = _item.dto2ReceiptNum;
                }
              } else {
                _item.receiptNum = _item.dto1ReceiptNum;
              }
              if (_item.dto1ReceiptNum == _item.receiptNum) {
                _item.customNum = _item.dto1ClntNum;
                _item.surName = _item.dto1SurName;
              } else {
                _item.customNum = _item.dto2ClntNum;
                _item.surName = _item.dto2SurName;
              }
            }
            this.tableData = res.data;
            console.log(this.tableData);
          } else {
            this.tableData = [];
          }
        }).catch(err => {
          this.$store.dispatch('loading/CHANGE_LOADING', false);
        })
      },


      //CYQ:20200212-收付费作业-autoPayIn账户维护-查询列表
      getList() {
        this.paginations.total = 0;
        this.tableData = [];
        this.form = {};
        let params = {
          "applNum": this.searchParams.applNum,
          "receiptNum": this.searchParams.receiptNum,
          "chdrNum": this.searchParams.chdrNum,
          "pageSize": this.paginations.pageSize,
          "pageNumber": this.paginations.pageIndex,
          "orderby": '',
        }

        if ((params.applNum == null || params.applNum == '')
          && (params.receiptNum == null || params.receiptNum == '')
          && (params.chdrNum == null || params.chdrNum == '')) {
          this.$message({
            message: '请至少输入一个查询条件来查询！',
            type: 'error'
          });
          return false;
        }


        if (params.applNum != '' && isNaN(params.applNum)) {
          this.$message({
            message: '受理号必须为数字!',
            type: 'error'
          });
          return false;
        }
        if (params.chdrNum != '' && isNaN(params.chdrNum)) {
          this.$message({
            message: '保单号必须为数字!',
            type: 'error'
          });
          return false;
        }

        if (params.receiptNum != '' && isNaN(params.receiptNum)) {
          this.$message({
            message: '收款凭证号码必须为数字!',
            type: 'error'
          });
          return false;
        }


        this.$store.dispatch('loading/CHANGE_LOADING', true)
        getAutoPayinQueryList(params).then(res => {
          this.$store.dispatch('loading/CHANGE_LOADING', false);
          console.log(res);
          if (res.resultCode == constant.SUCCESS) {
            this.paginations.total = res.data.total;
            if (res.data) {
              console.log(' wo  进来了');
              let _item = res.data[0];
              if (_item.customNum) {
                if (_item.customNum == _item.dto1ClntNum) {
                  _item.receiptNum = _item.dto1ReceiptNum;
                } else {
                  _item.receiptNum = _item.dto2ReceiptNum;
                }
              } else {
                _item.receiptNum = _item.dto1ReceiptNum;
              }
              if (_item.dto1ReceiptNum == _item.receiptNum) {
                _item.customNum = _item.dto1ClntNum;
                _item.surName = _item.dto1SurName;
              } else {
                _item.customNum = _item.dto2ClntNum;
                _item.surName = _item.dto2SurName;
              }
            }
            this.tableData = res.data;
            console.log(this.tableData);
            this.$message({
              message: '查询成功！',
              type: 'success'
            });
          } 
          // else {
          // }
        }).catch(err => {
          this.$store.dispatch('loading/CHANGE_LOADING', false);
        })
      },

      // 每页多少条切换
      handleSizeChange(pageSize) {
        this.paginations.pageSize = pageSize;
        this.getList();
      },
      // 上下分页
      handleCurrentChange(page) {
        this.paginations.pageIndex = page;
        this.getList();
      },
      // 根据条件查询列表
      subGetList() {
        this.paginations.pageIndex = 1;
        this.getList();
      },
      // 清除查询条件
      resetSearch() {
        this.searchParams.chdrNum = '';
        this.searchParams.applNum = '';
        this.searchParams.receiptNum = '';
      }
    },
    computed: {
      ...mapGetters(['tags']),
      reload() {
        return this.$store.state.loading.reload;
      }
    },
    activated() {
      if (this.reload) {
        this.$store.dispatch('loading/CHNAGE_RELOAD', false)
        Object.assign(this.$data, this.$options.data());
      }
    }
  }
</script>

<style lang="less" scoped>
  .fillcontain {
    padding-bottom: 0;
  }

  .contain {
    background: #fff;
    padding: 10px;
    margin-bottom: 20px;
  }

  .pagination {
    padding: 10px 20px;
    text-align: right;
  }

  .operationIcon {
    // padding: 12px;
    border: 1px solid #e5e5e5;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: inline-block;
    cursor: pointer;
    box-shadow: 0 0 3px #f9f9f9;

    .svg-icon {
      font-size: 14px;
      fill: #68a3fc;
    }
  }

  .search_container {
    padding: 20px 20px 0 20px;
  }

  .common-box {
    padding-bottom: 15px;
  }

  .common-lab {
    line-height: normal !important;
    text-align: right;

    .labelName {
      text-align: right;
    }
  }
</style>



